<template>
  <div class="photoinfo-container">
    <!--    图片标题区域-->
    <h3 class="photo-title">{{photoInfo.title}}</h3>
    <p class="photo-subtitle">
      <span>发表时间:{{photoInfo.add_time | dateFormat}}</span>
      <span>点击:{{photoInfo.click}}次</span>
    </p>
    <hr>
    <!--图片信息区域-->
    <div class="content" v-html="photoInfo.content"></div>

    <!--    缩略图区域-->
    <div class="thumbs">
      <vue-preview :slides="list"></vue-preview>
    </div>


    <!--    底部评论区域-->
    <com-box :id="photoId"></com-box>

  </div>
</template>

<script>
  import comment from '../subcomponents/Comments.vue'

  export default {
    data() {
      return {
        photoId: this.$route.params.id,
        photoInfo: {},
        list: []//缩略图数组
      }
    },
    created() {
      this.getPhotoInfo()
      this.getSuoLueImages()
    },
    methods: {
      getPhotoInfo() {//获取图片详情信息
        this.$http.get('api/getimageInfo/' + this.photoId).then(result => {
          if (result.body.status === 0) {
            this.photoInfo = result.body.message[0]
          }
        })
      },
      getSuoLueImages() {
        this.$http.get('api/getthumimages/' + this.photoId).then(result => {
          if (result.body.status === 0) {
            result.body.message.forEach(item => {
              item.w = 600
              item.h = 600
              item.msrc = item.src
            })
            this.list = result.body.message
            console.log(this.list)
          }
        })
      }
    },
    components: {
      'com-box': comment
    }
  }
</script>

<style lang="scss" scoped>
  .photoinfo-container {
    padding: 3px;

    .photo-title {
      font-size: 15px;
      text-align: center;
      margin: 15px 0;
      color: #26a2ff;
    }

    .photo-subtitle {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
    }

    .content {
      font-size: 13px;
      line-height: 30px;
    }
  }
</style>

<style lang="scss">
  .thumbs {
    .my-gallery {
      display: flex;
      flex-wrap: wrap;
    }
    figure {
      width: 100px;
      height: 100px;
      margin: 10px;
      box-shadow: 0 0 8px #999;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>